import React, { PureComponent } from "react";
import { Select, Button, Card, message } from "antd";
import { connect } from "dva";
import PropTypes from "prop-types";
// import AMap from "AMap";
import TrackList from "./TrackList";
import { mapObjIndexed } from "ramda";
import { Polygon } from "react-amap";
import { cloneDeep } from "lodash";
import {PlayCircleOutlined, PauseCircleOutlined} from '@ant-design/icons';

let map;
// let marker
let markerList = [];
let polylines = [];
const { Option } = Select;

@connect(({ creditCar }) => ({
  creditCar,
}))
export default class CarMultiTrack extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.object,
  };
  state = {
    speed: 1000,
    status: "",
    map: null,
    linesArr: [],
    selectedLine: [],
    selectedMarker: null,
  };

  componentDidMount() {
    this.initializeMap();
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  setDataState = (d) => {
    // console.log(data);
    const data = cloneDeep(d);
    this.setState(
      {
        linesArr: data,
      },
      () => {
        this.drawLines(data);
      }
    );
  };

  startAnimation = () => {
    const { speed, status, selectedLine, selectedMarker } = this.state;
    console.log('selectedLine', selectedLine)
    console.log('selectedMarker', selectedMarker)
    if (selectedLine && selectedLine.length !== 0) {
      if (status) {
        if (status === "pause") {
          selectedMarker?.resumeMove();
          this.setState({
            status: "",
          });
        }
      } else {
        console.log(selectedMarker);
        selectedMarker?.moveAlong(selectedLine, speed);
      }
    } else {
      message.warn("请勾选并选中行车轨迹");
    }
  };

  pauseAnimation = () => {
    const { selectedLine, selectedMarker } = this.state;
    if (selectedLine && selectedLine.length !== 0) {
      this.setState({
        status: "pause",
      });
      selectedMarker?.pauseMove();
    } else {
      message.warn("请勾选并选中行车轨迹");
    }
  };

  resumeAnimation = () => {
    const { selectedMarker } = this.state;

    selectedMarker?.resumeMove();
  };

  stopAnimation = () => {
    const { selectedMarker } = this.state;
    selectedMarker?.stopMove();
  };

  initializeMap = () => {
    map = new AMap.Map("container", {
      resizeEnable: true,
      zoom: 17,
    });
    this.setState({
      map: map,
    });
  };

  drawLines = (data) => {
    // console.log(markerList);
    if (markerList && markerList.length) {
      map.clearMap();
    }
    const lines = cloneDeep(data);
    markerList = [];
    const positions = [];
    lines.forEach((obj) => {
      const start = obj.lineData[0];
      positions.push(start);
      let marker = new AMap.Marker({
        map: map,
        position: [start[0], start[1]],
        icon: require("@/assets/credit_car.png"),
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
        extData: obj,
      });

      // 绘制轨迹
      let polyline = new AMap.Polyline({
        map: map,
        path: obj.lineData,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });

      let passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });

      marker.on("moving", function (e) {
        passedPolyline.setPath(e.passedPath);
      });
      markerList.push(marker);
    });
    map.add(markerList);
    const polygon = new AMap.Polygon({
      path: positions,
      map: map,
      strokeOpacity: 0,
      fillOpacity: 0,
      bubble: true,
    });
    const overlay = map.getAllOverlays("polygon");
    map.setFitView(overlay);
  };
  destroyMap = () => {
    map && map.destroy();
  };

  onSelect = (value) => {
    const { selectedMarker } = this.state;

    selectedMarker?.stopMove();
    if (value) {
      this.setState({
        speed: value,
      });
    } else {
      this.setState({
        speed: 1000,
      });
    }
  };
  selectedTrackData = (d) => {
    console.log('d', d)
    const { linesArr } = this.state;
    console.log('linesarr', linesArr)
    // console.log(data);
    const data = cloneDeep(d);
    console.log('data', data)
    if (linesArr.length) {
      // 有选中行
      this.setState({
        selectedLine: linesArr.find((line) => {
          return line.lineId === data.id;
        })?.lineData,
        selectedMarker: markerList.find((marker) => {
          console.log(marker);
          return marker.getExtData().lineId === data.id;
        }),
      });
    } else {
      message.warn("请勾选并选中行车轨迹");
    }
  };
  render() {
    return (
      <div>
        <div
          style={{
            width: "35%",
            position: "absolute",
            marginTop: 10,
            zIndex: 888,
            left: "4%",
            opacity: 0.9,
          }}
        >
          <Card>
          <TrackList
              setDataState={this.setDataState}
              selectedTrackData={this.selectedTrackData}
            />
          </Card>
        </div>
        <div
          style={{
            position: "absolute",
            marginTop: 10,
            zIndex: 888,
            right: "8%",
          }}
        >
          <Select
            defaultValue="1000"
            style={{ width: 150, marginRight: 10 }}
            placeholder="请选择播放倍数"
            onChange={(value) => this.onSelect(value)}
          >
            <Option value="200">200倍</Option>
            <Option value="300">300倍</Option>
            <Option value="500">500倍</Option>
            <Option value="1000">1000倍</Option>
            <Option value="5000">5000倍</Option>
            <Option value="10000">10000倍</Option>
          </Select>
          <Button
            style={{ marginRight: 10 }}
            size="large"
            type="primary"
            shape="circle"
            icon={<PlayCircleOutlined />}
            onClick={() => this.startAnimation()}
          />
          <Button
            size="large"
            type="primary"
            shape="circle"
            icon={<PauseCircleOutlined />}
            onClick={() => this.pauseAnimation()}
          />
        </div>
        <div
          id="container"
          style={{
            width: "94%",
            height: "600px",
            position: "absolute",
            zIndex: 777,
          }}
        ></div>
      </div>
    );
  }
}
